import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
	props: {
		tableData: Object, // 确保类型匹配
	},
	setup(props, { emit }) {
		let searchList = [];
		let valueList = reactive({});
		props.tableData.clums.forEach((item) => {
			item.search && (searchList.push(item), (valueList[item.search.key || item.props] = null));
		});
		console.log("0099", searchList, valueList);
		return () => (
			<div style={{display:'flex',alignItems:'center'}}>
				{searchList.length > 0 &&
					searchList.map((item) => {
						switch (item.search.type) {
							case "input":
								return <el-input style={{ maxWidth: item.search.width || "200px", marginRight: "10px" }} v-model={valueList[item.search.key || item.props]} placeholder={item.search.placeholder} maxlength={item.search.maxLength} clearable={item.search.clearable || true} />;
							case "select":
								return (
									<el-select style={{ maxWidth: item.search.width || "200px", marginRight: "10px" }} v-model={valueList[item.search.key || item.props]} placeholder={item.search.placeholder} clearable={item.search.clearable || true}>
										{item.search.optionList.map((item) => {
											return <el-option key={item.value} label={item.label} value={item.value} />;
										})}
									</el-select>
								);
							case "datetime":
								return <el-date-picker style={{ maxWidth: item.search.width || "200px", marginRight: "10px" }} v-model={valueList[item.search.key || item.props]} type="datetime" placeholder={item.search.placeholder} clearable={item.search.clearable || true} />;
                            case "timerange":
                                return <el-date-picker style={{ maxWidth: item.search.width || "340px", marginRight: "10px" }} value-format={item.search.timeFormatter} v-model={valueList[item.search.key || item.props]} type="datetimerange" start-placeholder={item.search.startPlaceholder||'开始时间'} end-placeholder={item.search.endPlaceholder||'结束时间'} clearable={item.search.clearable || true} />;
							default:
								break;
						}
					})}
				<el-button
					onClick={() => {
						emit("handelSearch", valueList);
					}}
					type="primary"
				>
					查询
				</el-button>
			</div>
		);
	},
});
